<template>
    <el-dialog :visible.sync="dialogTableVisible" :show-close="true" :center="true" top="4vh" :before-close="beforeClose">
        <div class="dialogVue">
            <div class="tabVue flex">
                <div class="tab" :class="{active: current===0}" @click="changeCurrent(0)">好友列表</div>
                <div class="tab" :class="{active: current===1}" @click="changeCurrent(1)">黑名单列表</div>
            </div>
            <!-- 筛选 -->
            <div class="searchVue flex">
                <el-input v-model="key" placeholder="搜索好友" style="width: 200px;" :clearable="true" prefix-icon="el-icon-search" @input="reStart"></el-input>
                <div class="flex align_center" style="height: 40px;">
                    <div style="font-weight: 600; padding-left: 15px; font-size: 13px;">快速查找</div>
                    <span style="padding-left: 15px; cursor: pointer; font-size: 13px;" :class="{active: selectName==='全部'}" @click="fastSearch(1, '全部')">全部</span>
                    <span style="padding-left: 15px; cursor: pointer; font-size: 13px;" :class="{active: selectName==='有备注'}" @click="fastSearch(2, '有备注')">有备注</span>
                    <span style="padding-left: 15px; cursor: pointer; font-size: 13px;" v-for="item in words" :key="item" :class="{active: selectName===item}" @click="fastSearch(3, item)">{{ item }}</span>
                </div>
            </div>

            <div class="listVue">
                <div class="content">
                    <div class="thVue flex align_center">
                        <div class="li" style="width: 80px; line-height: 40px; text-align: center;">
                            <img src="../../../assets/S2.png" style="width: 20px; height: 20px; cursor: pointer;" v-if="isCurrentPage"  @click="cancelCurrentPage">
                            <img src="../../../assets/S1.png" style="width: 20px; height: 20px; cursor: pointer;" v-else  @click="selectCurrentPage">
                            <span style="font-weight: 600; padding-left: 5px;">当前页</span>
                        </div>        
                        <div class="li" style="width: 200px; line-height: 40px; text-align: center; font-weight: 600;">微信名</div>
                        <div class="li" style="width: 200px; line-height: 40px; text-align: center; font-weight: 600;">备注名</div>
                        <div class="li" style="flex: 1; line-height: 40px; text-align: center;">
                            <el-dropdown trigger="click" @command="handleTagCommand">
                                <span class="el-dropdown-link" style="cursor: pointer;color: #333; font-weight: 600;">
                                    {{ tag || "标签" }}<i class="el-icon-caret-bottom el-icon--right" style="color: #333; font-weight: 600;"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item v-for="item in tags" :key="item" :command="item">{{ item }}</el-dropdown-item>
                                </el-dropdown-menu>        
                            </el-dropdown>
                         </div>
                        <div class="li" style="width: 200px;; line-height: 40px; text-align: center;">
                            <el-dropdown trigger="click" @command="handleCategoryCommand">
                                <span class="el-dropdown-link" style="cursor: pointer;color: #333; font-weight: 600;">
                                    {{ category || "分组" }}<i class="el-icon-caret-bottom el-icon--right" style="color: #333; font-weight: 600;"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item v-for="item in categoryList" :key="item.id" :command="item">{{item.name}}</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                        <div class="li" style="width: 100px;; line-height: 40px; text-align: center;">
                            <el-dropdown trigger="click" @command="handleChatCommand">
                                <span class="el-dropdown-link" style="cursor: pointer;color: #333; font-weight: 600;">
                                    {{ chatName || "聊天类型" }}<i class="el-icon-caret-bottom el-icon--right" style="color: #333; font-weight: 600;"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item v-for="item in chatTypes" :key="item.name" :command="item">{{item.name}}</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                    <div class="tdContent relative">
                        <div class="flex_column align_center absolute_auto" v-if="isEmpty">
                            <img src="../../../assets/empty.png" slot="empty" style="width: 313px; height: 172px; margin-bottom: 20px">
                            <span style="color: #101010; font-weight: 600; font-size: 18px">当前列表是空哦~</span>
                        </div>
                        <div class="tdVue flex" v-for="(item, index) in list" :key="index">
                            <div class="li" style="width: 80px; line-height: 50px; padding-left: 7px">
                                <img src="../../../assets/S2.png" style="width: 20px; height: 20px; cursor: pointer;" v-if="JSON.stringify($store.state.selectList).includes(JSON.stringify(item))" @click="removeFun(item)">
                                <img src="../../../assets/S1.png" style="width: 20px; height: 20px; cursor: pointer;" v-else  @click="selectFun(item)">
                            </div>
                            <div class="li line-1" style="width: 200px; line-height: 50px; text-align: center; font-size: 13px; padding: 0 10px;">{{item.type===1 ? item.groupName : item.friendWechatName}}</div>
                            <div class="li line-1" style="width: 200px; line-height: 50px; text-align: center; font-size: 13px; padding: 0 10px;">{{item.friendWechatRemark}}</div>
                            <div class="li flex_center align_center flex_1">
                                <template v-if="item.tag">
                                    <el-tag type="info" v-for="(ver, i) in item.tag.split(',')" :key="i">{{ ver }}</el-tag>
                                </template> 
                            </div>
                            <div class="li" style="width: 200px;; line-height: 50px; text-align: center; font-size: 13px;">{{ item.categoryName }}</div>
                            <div class="li" style="width: 100px;; line-height: 50px; text-align: center; font-size: 13px;">{{ ["私聊", "群聊"][item.type] }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部 -->
            <div class="botVue flex_between align_center">
                <div class="paginationVue flex_center align_center">
                    <el-pagination background layout="total, prev, pager, next" :total="total" :page-size="pageSize"  @current-change="handlePageChange"></el-pagination>
                </div>
                <div class="flex align_center">
                    <el-button size="mini" type="cancel" @click="beforeClose">取消</el-button>
                    <el-button size="mini" type="join" v-if="current===0" @click="joinFun">加入黑名单</el-button>
                    <el-button size="mini" type="join" v-if="current===1" @click="outFun">移出黑名单</el-button>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { toast } from '@/common/tools';
import { mapState } from 'vuex';
export default {
    props: {
        dialogTableVisible: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            current: 0,
            key: "",
            selectName: "全部",
            words: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
            pageNum: 1,
            pageSize: 20,
            list: [],
            total: 0,
            blackList: [],
            tags: ["高意向","中意向","低意向","了解产品详情", "询问价格", "询问使用方法", "询问发货时间", "询问售后服务", "非常满意", "满意", "一般", "不满意", "非常不满意", "产品质量", "发货时间", "售后服务", "使用问题", "价格问题", "新客户", "忠实客户", "活跃", "潜在", "流失"],
            tag: "",

            chatTypes: [{ name: "私聊", type: 0 }, { name: "群聊", type: 1}],
            chatType: "",
            chatName: "",

            categoryList: [],
            categoryId: "",
            category: "",

            isEmpty: false,
            isCurrentPage: false,
        }
    },
    computed: {
        ...mapState({
            currentWeChat: state=> state.currentWeChat,
        })
    },
    methods: {
        beforeClose(){
            this.current = 0
            this.$store.state.selectList = []
            this.tag = ""
            this.categoryId = ""
            this.chatType = ""
            this.selectName = ""
            this.chatName = ""
            this.pageNum = 1
            this.category = ""
            this.$emit("beforeClose")
        },

        changeCurrent(e){
            if(this.current===e) return
            this.current = e
            this.getList()
        },

        // 快速搜素
        fastSearch(index, str){
            switch(index){
                case 1:
                    this.selectName = str
                    this.list = []
                    this.chatType = ""
                    this.getList()
                break;
                case 2:
                    this.selectName = str
                    this.list = []
                    this.chatType = ""
                    this.getList()
                break;
                case 3:
                    this.selectName = str
                    this.list = []
                    this.chatType = ""
                    this.getList()
                break;
            }
        },

        reStart(){
            this.pageNum = 1
            this.getList()
        },

        handleTagCommand(command){
            this.tag = command
            this.selectName = ""
            this.reStart()
        },

        handleCategoryCommand(command){
            this.categoryId = command.id
            this.category = command.name
            this.selectName = ""
            this.reStart()
        },

        handleChatCommand(command){
            this.chatType = command.type
            this.chatName = command.name
            this.selectName = ""
            this.reStart()
        },

        // 全选当前页
        selectCurrentPage(){
            this.isCurrentPage = true
            for(let i=0; i<this.list.length; i++){
                if(!JSON.stringify(this.$store.state.selectList).includes(JSON.stringify(this.list[i]))) {
                    this.$store.state.selectList.push(this.list[i])
                }
            }
        },

        // 判断当前页是否全选
        isCurrentPageFun(){
            if(this.list.length===0) return this.isCurrentPage = false
            for(let i=0; i<this.list.length; i++) {
                if(!JSON.stringify(this.$store.state.selectList).includes(JSON.stringify(this.list[i]))) {
                    this.isCurrentPage = false
                    return 
                }
            }
            this.isCurrentPage = true
        },

        // 取消全选当前页
        cancelCurrentPage(){
            this.isCurrentPage = false
            for(let i=0; i<this.list.length; i++){
                this.$store.state.selectList = this.$store.state.selectList.filter(o=>{
                    return this.list[i].id != o.id
                })
            }
        },

        joinFun(){
            if(this.$store.state.selectList.length===0) return toast(1, "请至少选择一个对象")
            let wechatFriendIdList = []
            for(let i=0; i<this.$store.state.selectList.length; i++){
                wechatFriendIdList.push(this.$store.state.selectList[i].id)
            }
            this.$post("/front/wechat/friend/batchUpdateBlacklist", {
                wechatFriendIdList: wechatFriendIdList,
                state: 1
            }).then(res=>{
                if(res.data.code===0) {
                    toast(0, "加入成功")
                    this.getList()
                    this.$store.state.selectList = []
                }else {
                    toast(1, res.data.msg)
                }
            })
        },

        outFun(){
            if(this.$store.state.selectList.length===0) return toast(1, "请至少选择一个对象")
            let wechatFriendIdList = []
            for(let i=0; i<this.$store.state.selectList.length; i++){
                wechatFriendIdList.push(this.$store.state.selectList[i].id)
            }
            this.$post("/front/wechat/friend/batchUpdateBlacklist",{
                wechatFriendIdList: wechatFriendIdList,
                state: 0
            }).then(res=>{
                if(res.data.code===0) {
                    toast(0, "移除成功")
                    this.getList()
                    this.$store.state.selectList = []
                }else {
                    toast(1, res.data.msg)
                }
            })
        },

        removeFun(item){
            this.isCurrentPage = false
            this.$store.state.selectList = this.$store.state.selectList.filter(o=>{
                return item.id != o.id
            })
        },

        // 单个选择好友
        selectFun(item){
            this.$store.state.selectList.push(item)
        },

        handlePageChange(val){
            console.log(`当前页: ${val}`);
            this.pageNum = val
            this.getList()
        },

        // 获取分组列表
        getCategoryList(){
            this.$post("/front/wechat/friend/categoryList").then(res=>{
                if(res.data.code===0) {
                    this.categoryList = res.data.obj
                }
            })
        },

        // 获取好友列表
        getList(){
            this.$post("/front/wechat/friend/friendList", {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                userWechatPrimaryId: this.currentWeChat.currentWeChatId,
                categoryId: this.categoryId,
                tag: this.tag,
                content: this.key,
                type: this.chatType,
                userWechatName: this.currentWeChat.currentUserWechatName,
                blacklist: this.current
            }).then(res=>{
                if(res.data.code===0) {
                    this.list = res.data.obj.list
                    this.total = res.data.obj.total
                    this.isEmpty = this.total===0
                    this.isCurrentPageFun()
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
.el-dropdown-menu {
    max-height: 60vh !important;
    overflow-y: scroll
}
.el-dropdown-menu::-webkit-scrollbar {
    width: 0;
    height: 0;
}
:deep(.el-dialog) {
    width: 90vw;
    height: 90vh;
}
:deep(.el-tag--info) {
    margin: 0 3px 3px;
}
:deep(.el-icon-search:before) {
    color: #AAA !important;
}
:deep(.el-dialog__title) {
    color: #111;
    font-size: 16px;
    font-weight: 600;
}
:deep(.el-dialog__header) {
    padding: 0;
}
:deep(.el-dialog__body) {
    padding: 0;
}
:deep(.el-button--join) {
    background: #0147fd;
    height: 34px;
    margin-left: 10px;
    span {
        color: #fff !important;
    }
}
.dialogVue {
    width: 100%;
    height: 100%;
    padding: 15px 15px 0;
    .tabVue {
        width: 300px;
        height: 40px;
        .tab {
            width: 150px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            text-align: center;
            background: #f5f5f5;
            color: #333;
            cursor: pointer;
        }
        .tab:nth-child(1) {
            border-radius: 4px 0 0 4px;
        }
        .tab:nth-child(2) {
            border-radius: 0 4px 4px 0;
        }
        .active {
            background: #0147fd;
            color: #fff;
        }
    }
    .searchVue {
        width: 100%;
        height: 60px;
        padding-top: 20px;
        .active {
            font-weight: 600;
            color: #0147fd;
        }
    }
    .listVue {
        width: 100%;
        height: calc(90vh - 175px);
        margin-top: 10px;
        .thVue {
            width: 100%;
            height: 40px;
            background: #f5f5f5;
        }
        .tdContent {
            width: 100%;
            height: calc(90vh - 225px);
            overflow: scroll;
            .tdVue {
                width: 100%;
                height: 50px;
                border-bottom: 1px solid #f5f5f5;
            }
            .tdVue:hover {
                background: #f5f5f5;
            }
        }
        .tdContent::-webkit-scrollbar {
            width: 0;
            height: 0;
        }  
    }
    .botVue {
        width: 100%;
        height: 50px;
    }
}
</style>